<template>
	<view class="container">
		<cu-custom bgColor="bg-gray" :isBack="true">
			<block slot="content">加入签到</block>
		</cu-custom>
		<view class="qdBox">
			<view class="qdForm">
				<u--form :model="form" ref="uForm" labelWidth="100">
					<u-form-item label="房间号" prop="meetingCode">
						<input type="number" @change="changeFormCode" v-model="form.meetingCode" name="" id="" placeholder="请输入房间号">
					</u-form-item>
					<u-form-item label="加入码" prop="meetingPwd">
						<input type="number" v-model="form.meetingPwd"  name="" id="" placeholder="请输入加入码">
					</u-form-item>
					<u-form-item label="申请信息" prop="name" v-if="hasApply" >
						<input type="text" v-model="form.applyInfo"  name="" id=""  placeholder="需审核，请填写申请信息">
					</u-form-item>
				</u--form>
			</view>
			<view class="padding-tb secTit">
				*签到创建者邀请您填写资料
			</view>
			<view class="qdForm" v-if="formList.length">
				<u--form :model="form" ref="uForm" labelWidth="100">
					<u-form-item :label="item.formTitle" prop="name" v-for="(item,index) in formList" :key="index" @click="itemClick(item)">
						<input v-if="item.formType=='input-single'" type="text" v-model="formData[`form_${item.id}`]" :placeholder="`${item.formTitle}`">
						<u--textarea  v-if="item.formType=='input-multi'" v-model="formData[`form_${item.id}`]" :placeholder="`${item.formTitle}`"></u--textarea>
						<view  v-if="item.formType=='image'">
							<u-upload
								:fileList="formData[`form_${item.id}`]"
								:name="item.id"
								@afterRead="changeImage"
								@delete="deletePic"
								multiple
								:maxCount="10"
							></u-upload>
						</view>
						<view  v-if="item.formType=='select'" class="flex align-center justify-between">
							<u--input
								v-model="formData[`form_${item.id}`]"
								disabled
								disabledColor="#ffffff"
								 :placeholder="`${item.formTitle}`"
								border="none"
							></u--input>
							<u-icon
								slot="right"
								size="14"
								name="arrow-right"
							></u-icon>
						</view>
					</u-form-item>
				</u--form>
			</view>
			<view class="joinBtn" @click="joinHome" :class="form.meetingCode?'change':''">
				加入签到
			</view>
		</view>
		<!-- 下拉选择器 -->
		<u-action-sheet
			:show="showSelect"
			:actions="selectActions"
			title="请选择"
			@close="showSelect = false"
			@select="changeSelect"
		>
		</u-action-sheet>
    </view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
		},
		data() {
			return {
				form:{
					meetingCode:"",
					meetingPwd:"",
					applyInfo:""
				},
				formData:{

				},
				formList:[],
				fileList:[],
				hasApply:false,
				showSelect:false,
				selectActions:[],
				formItem:{},
			};
		},
		//下拉刷新
		onPullDownRefresh(){
		},
		//加载更多
		onReachBottom(){
		},
		onShow() {
		},
		computed: {
		},			
		methods: {
			//选择框修改
			changeSelect(e){
				this.formData[`form_${this.formItem.id}`] = e.name; 
			},
			// item点击事件
			itemClick(item){
				if(item.formType=='select'){
					this.selectActions = item.formRange.split('\n').map((res)=>{
						return {name:res}
					})
					this.formItem = {...item}
					this.showSelect = true
				}
			},
			//上传
			changeImage(e){
				let id = e.name;
				let filesList = this.$ComFunJS.upload(e.file.map((res)=>{return res.url}));
				filesList.then((label)=>{
					let list = label.map((name)=>{return {url:name}})
					this.formData[`form_${id}`]  = [...this.formData[`form_${id}`],...list]
				});
			},
			// 删除图片
			deletePic(e){
				this.formData[`form_${e.name}`].splice(e.index,1)
			},
			// 房间号
			changeFormCode(e){
				this.$ComFunJS.ajax({
					method:"get",
					url: "/rest/api/meetingForm",
					data:{
						meetingCode: e.detail.value
					},
					success:(result)=>{
						this.formList = result.data.formList;
						this.hasApply = result.data.hasApply;
						result.data.formList.map((label)=>{
							this.$set(this.formData,`form_${label.id}`,label.formType=='image'?[]:'')
						})
					}
				})
			},
			joinHome(){
				///rest/api/joinMeeting
				if(!this.form.meetingCode){
					this.$api.msg('房间号不能为空哦')
					return
				}
				let formData = [];
				if(this.formList.length){
					formData = Object.keys(this.formData).map((label,key)=>{
						let labelItem = {
							formId:label.split('_')[1],
							content:Array.isArray(this.formData[label])?this.formData[label].join(','):this.formData[label]
						}
						return labelItem
					})
				}
				this.$ComFunJS.ajax({
					method:"post",
					url: "/rest/api/joinMeeting",
					data:{
						...this.form,
						formData:JSON.stringify(formData)
					},
					success:(result)=>{
						this.$api.msg('加入成功');
						setTimeout(() => {
						    uni.navigateBack();
						}, 1000);
					}
				})
			}
		},
	}
</script>
<style lang="scss" scoped>
	.qdBox{
		padding: 30upx 32upx;
		.qdForm{
			padding: 32upx 30upx;
			background: #fff;
			border-radius: 20upx;
		}
	}
	.secTit{
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}
	.joinBtn{
		width: 100%;
		height: 100upx;
		background: #97C1FF;
		border-radius: 20upx;
		margin-top: 42upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #fff;
		&.change{
			background-color: #1A75FF;
		}
	}
</style>
